<template>
    <div class="viewport">
        <!-- <div class="row">
            <div class="col-lg-12">
                <form id="ul-form" enctype="multipart/form-data">
                    <input type="file" name="file1">
                    <input type="file" name="file2">
                    <input type="file" name="file3">
                </form>
                <button class="btn btn-primary" @click.prevent="uploadfile"> 上 传 </button>
            </div>
        </div> -->
        <div class="row">
            <div class="col-lg-3 form-horizontal">
                <div class="form-group">
                    <label class="col-sm-4 control-label">商品类型</label>
                    <div class="col-sm-8">
                        <select class="form-control" v-model="type">
                            <option value="all">全部</option>
                            <option v-for="(item,i) in $root.GOOD_TYPES" :key="i" :value="item.id">{{item.name}}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 form-horizontal">
                <div class="form-group">
                </div>
            </div>
            <div class="col-lg-3 form-horizontal">
                <div class="form-group">
                    
                </div>
            </div>
            <div class="col-lg-3 text-right">
                <button class="btn btn-primary" @click.prevent="search"> 查 询 </button>
                <button class="btn btn-primary" @click.prevent="add_show=true"> 新 增 </button>
            </div>
        </div>
        <div class="row">
                <div class="col-lg-12">
                    <div class="flex-list table-style table-striped-style">
                        <div class="flex-row title-row">
                            <div class="flex-1 flex-col">序号</div>
                            <div class="flex-1 flex-col">编码</div>
                            <div class="flex-2 flex-col">ID</div>
                            <div class="flex-2 flex-col">菜名</div>
                            <div class="flex-2 flex-col">分类</div>
                            <div class="flex-1 flex-col">状态</div>
                            <div class="flex-1 flex-col">存量</div>
                            <div class="flex-1 flex-col">价格(元)</div>
                            <div class="flex-1 flex-col">优惠价格(元)</div>
                            <div class="flex-2 flex-col">操作</div>
                        </div>
                        <div class="flex-list-body">
                            <template v-for="(item,i) in list">
                                <div class="flex-row" :key="item.id">
                                    <div class="flex-1 flex-col">{{i+1}}</div>
                                    <div class="flex-1 flex-col">{{item.codeId?item.codeId:'NA'}}</div>
                                    <div class="flex-2 flex-col">{{item.id}}</div>
                                    <div class="flex-2 flex-col">{{item.name}}</div>
                                    <div class="flex-2 flex-col">{{item.goodsTypes[0].name}}</div>
                                    <div class="flex-1 flex-col">{{item.disable | disableStr}}</div>
                                    <div class="flex-1 flex-col">{{item.qty}}</div>
                                    <div class="flex-1 flex-col">{{item.price}}</div>
                                    <div class="flex-1 flex-col">{{item.preferentialPrice}}</div>
                                    <div class="flex-2 flex-col">
                                        <a href="###" @click.prevent="viewShow(item)">查看</a>&nbsp;&nbsp;
                                        <a href="###" @click.prevent="editShow(item)">编辑</a>&nbsp;&nbsp;
                                        <a href="###" @click.prevent="delGood(item)">删除</a>
                                        
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>

            
            <ViewGoodsModal :id="curr_id" :open="view_show" @close="view_show=false"></ViewGoodsModal>
            <AddGoodsModal :open="add_show" @close="add_show=false" @adddone="addDone"></AddGoodsModal>
            <EditGoodsModal :id="curr_id" :open="edit_show" @close="edit_show=false" @editdone="editDone"></EditGoodsModal>
            
    </div>
</template>
<script>
    import AddGoodsModal from '../components/goods/AddGoodsModal.vue'
    import EditGoodsModal from '../components/goods/EditGoodsModal.vue'
    import ViewGoodsModal from '../components/goods/ViewGoodsModal.vue'
    import DelGoodsModal from '../components/goods/DelGoodsModal.vue'
    import {tip,ajax} from '../tools/tools.js'

    export default {
        components: {
            AddGoodsModal,EditGoodsModal,ViewGoodsModal,DelGoodsModal
        },
        data() {
            return {
                list:[],

                add_show:false,

                curr_id:'',
                view_show:false,
                edit_show:false,
                del_show:false,

                content:'',
                type: 'all'
                
            }
        },
        watch: {
            edit_show(v,ov){
                var self = this;
                if(v==false){
                    self.curr_id = '';
                }
            },
            view_show(v,ov){
                var self = this;
                if(v==false){
                    self.curr_id = '';
                }
            }
        },
        filters:{
            disableStr(v){
                return v?'下架':'在售';
            }
        },
        methods: {
            getList(innerCb, opt){
                var self = this;
                if(typeof opt === 'undefined') {
                    opt = {}
                }
                opt.token = self.$root.TOKEN
                ajax.goodsList({
                    param: opt,
                    cb(data){
                        if(data.datalist){
                            self.list = data.datalist;
                        }
                        if(innerCb)innerCb(data);
                    }
                })
            },
            viewShow(item){
                var self = this;
                self.curr_id = item.id;
                self.view_show = true;
            },
            editShow(item){
                var self = this;
                self.curr_id = item.id;
                self.edit_show = true;
            },
            addDone(){
                var self = this;
                self.getList((d)=>{
                    self.add_show = false;
                });
            },
            editDone(){
                var self = this;
                self.getList((d)=>{
                    self.curr_id = '';
                    self.edit_show = false;
                });
                
            },
            delGood(item){
                var self = this;
                if(confirm('是否确认删除菜品'+item.name)){
                    ajax.goodsDel({
                        type:'post',
                        param:{
                            token:self.$root.TOKEN,
                            id:item.id
                        },
                        cb(data){
                            tip.info('成功删除菜品'+item.name);
                            self.getList();
                        }
                    })
                }
            },
            search(){
                this.getList(null, this.type === 'all' ? null : {
                    type: this.type
                });
            }
        },
        mounted(){
            this.getList();
        }
    }
</script>
<style scoped>
    
</style>